<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { uploadTaskEventToGA } from '@/utils'

import { fetchUserInvitedInfo, bindInvierEmail } from '@/api/invtied'

import Banner from './components/banner.vue'
import Total from './components/total.vue'
import Inviter from './components/inviter.vue'
import Rules from './components/rules.vue'
import InviterPopup from './components/inviterPopup.vue'

const userStore = useUserStore()

const loading = ref(true)
interface InvitedInfo {
    invitedNumber: number,
    inviterEmail: string | null,
    isLogIn: boolean,
    isNewbieApply: boolean,
    myEmail: string,
    reward: number
}
const userInvitedInfo = ref<InvitedInfo>({} as InvitedInfo)
const handleFetchUserInvitedInfo = async () => {
    try {
        const res = await fetchUserInvitedInfo({ device: userStore.device })
        userInvitedInfo.value = res.data.data || {}
        loading.value = false
    } catch (error) {
        throw new Error(error as string)
    }
}
handleFetchUserInvitedInfo()

const handleCopyShareLink = () => {
    uploadTaskEventToGA("InviteNow")
    if (loading.value) {
        return
    }

    if (userInvitedInfo.value.isLogIn && userInvitedInfo.value.myEmail) {
        android.inviteUser()
    } else {
        showToast('Please log in first')
        android.jumpToLogin()
    }
}

const showInviterInputPopup = ref(false)
const openInviterInputPopup = () => {
    showInviterInputPopup.value = true
}
const handleInputInviter = () => {
    uploadTaskEventToGA("Myinviter")
    if (userInvitedInfo.value.isNewbieApply) {
        showToast('This feature is only open to new users.')
    } else {
        openInviterInputPopup()
    }
}

const inviterEmail = ref('')
const handleBindInviterEmail = async () => {
    try {
        await bindInvierEmail({
            bindType: 2, // 邮箱绑定
            device: userStore.device,
            referrerEmail: inviterEmail.value.trim()
        })
        userInvitedInfo.value.inviterEmail = inviterEmail.value
        showToast('Bind success')
    } catch (error) {
        throw new Error(error as string)
    }
}
</script>

<template>
    <div class="invited">
        <Banner />
        <main class="main">
            <div class="wrapper">
                <Total @invite-click="handleCopyShareLink" :invited-number="userInvitedInfo.invitedNumber"
                    :reward="userInvitedInfo.reward" :disable="loading" />
            </div>
            <div class="wrapper">
                <Inviter @inviter-click="handleInputInviter" :inviter-email="userInvitedInfo.inviterEmail" />
            </div>
            <div class="wrapper">
                <Rules />
            </div>
        </main>

        <InviterPopup v-model:show="showInviterInputPopup" v-model:input="inviterEmail"
            @confirm="handleBindInviterEmail" />
    </div>
</template>

<style scoped lang="scss">
@import url(./invited.scss);
</style>